<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Boilerplate Test Suite</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media="all" -->
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="hack2.css">
 
  <!-- All JavaScript at the bottom, except for Modernizr and Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries -->
  <script src="js/libs/modernizr-1.7.min.js"></script>
  <script src='js/libs/respond.min.js'></script>
</head>

<body>

  <div id="container">
    <header>
        <br /><br /><h1>HTML5 Boilerplate CSS Hack Sheet</h1><br /><br />
    </header>
  
    
    <div id="main" style="display:block;">
      <dl>
        <dt>Hack 01 - Set default color</dt>
          <dd>
            HTML5 Boilerplate suggests the default color looks better when set to #444 instead of #000.<br />
            <span style="color:black;">Web font default color</span>
          </dd>
        
        <dt>Hack 02 - Vertical Scroll Bar</dt>
          <dd>
            Click <a href="#" id="shorten">contract</a> | <a href="#" id="expand">expand</a> to see how Boilerplate forces a scrollbar in non-IE.
          </dd>

        <dt>Hack 03 - Accessible focus style</dt>
          <dd>
            Remove dotted outline around 'a' element on hover and on focus in certain browsers
            <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <a href="#" class="preventDefault">Click me</a>
          </dd>
      
        <dt>Hack 04 - Pre Wrapping</dt>
          <dd>
            Default <code>pre</code> doesn't wrap text. Boilerplate forces <code>pre</code> to wrap text.
            <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            with wrapping:<br /><br />
            <div style="height:115px;">
              <div class="wrapper">
                <pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
              </div>
            </div><br />
            without wrapping:<br /><br />
            <div class="wrapper">
              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
          </dd>
          
        <dt>Hack 05 - Remove default textarea scrollbar in IE</dt>
          <dd>                 
            IE shows a disabled scrollbar on empty <code>textarea</code>.<br><br>
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <form>
              <textarea></textarea>
            </form>
          </dd>        
      
        <dt>Hack 06 - IE6,7 legend margin</dt>
          <dd>
            Left align form legend to the inner text in IE 6,7.<br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <form>
              <fieldset>
                <legend>Information:</legend><br />
                Name: <input type="text" size="30" /><br />
                Email: <input type="text" size="30" /><br />
                Date of birth: <input type="text" size="10" />
              </fieldset>
            </form>
          </dd>
        
        <dt>Hack 07 - Vertically align checkboxes, radios, text inputs with their label</dt>
          <dd>
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <input type="radio" /> Option A <br /><br />
            <input type="checkbox" /> Item B <br /><br />
            Name: <input type="text" />
          </dd>
            
        <dt>Hack 08 - Hand cursor on clickable input elements</dt>
          <dd>
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            Input with type submit <input type="submit" value="submit" />
          </dd>
          
          
        <dt>Hack 09 - Webkit browsers form elements margin</dt>
          <dd>
            Webkit browsers add a 2px margin outside the chrome of form elements.<br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <form>
            <input type="submit" value="submit" /><br /><br />
            <button type="button">Click Me!</button><br /><br />
            <select><option>Default</option></select>
            </form>
          </dd>
          
        <dt>Hack 10 - Make buttons width rendered correctly</dt>
          <dd>
            IE adds extra padding to <code>button</code>. This fixes the issue. <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <form>
              <button type="button">Click Me!</button>
              <button type="button">This is a really long button</button>
            </form>
          </dd>
        
        <dt>Hack 11 - Bicubic resizing for non-native sized IMG</dt>
          <dd>
            IE7 hack to reduce distortion caused by image resizing <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <img src="../apple-touch-icon.png" width="27" /><br />
            <img src="../apple-touch-icon.png" width="57" /><br />
            <img src="../apple-touch-icon.png" width="157" /><br />
          </dd>
        
        <dt>Hack 12 - Hide visually</dt>
          <dd>
            Hide elements visually, but have it available for screen readers.
            <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <div class="visuallyhidden">showing</div>
          </dd>
        
        <dt>Hack 13 - Image text replacement</dt>
          <dd>
            Replace text with images. 
            <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            
            <div class="ir" style="background:url('../apple-touch-icon.png'); width:57px; height:57px;">Apple Touch Icon</div>
            
          </dd>  

        <dt>Hack 14 - Clear Floats</dt>
          <dd>
            Clear Floated elements without extra markup. 
            <br /><br />
            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
            <br /><br />
            <div id="clear-demo" class="clearfix">
              <div id="clear-demo-l">text floated left</div><div id="clear-demo-r">text floated right</div>
            </div>
            <div id="clear-demo-b">unfloated text</div>
          </dd>  
          
          
          <dt>Hack 15 - PNG fix</dt>
          <dd>fix pngs for correct display in IE6
            <br /> <br />

          <div style="position:relative">
            
            <!-- wassup gradient. -->
            <div style="
              position:absolute; height: 40px; background-color: #444444; background-image: -moz-linear-gradient(top, #444444, #999999);
              background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
              filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
            ">
              
              <div class="png_bg" style="
                border:1px solid #ddd; width:100px; padding:10px 10px 10px 50px;
                display:inline-block; background:url(test_tubes.png) no-repeat 5px center;
              ">
                <img src="internet_explorer.png" alt="IE is so awesome" />
              </div>
            </div>
          </div>            
        </dd>  
      </dl>
    </div>
    <footer>

    </footer>
  </div> <!--! end of #container -->


  <!-- Javascript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='../js/libs/jquery-1.6.min.js'>\x3C/script>")</script>


  <script>
    $("#expand").click(function() {
      $("#container").css("height","auto").css("overflow","");
      return false;
    });
    
    $("#shorten").click(function() {
      $("#container").css("height","300px").css("overflow","hidden");
      return false;
    });
    
    $("#atag").click(function() {
      return false;
    });
    
    $(".show").click(function(){
      $(".show").addClass("current")
      $(".hide").removeClass("current");
      showStyle();
      return false;
    });
    $(".hide").click(function(){
      $(".hide").addClass("current")
      $(".show").removeClass("current");
      // freeze the size of each tests so the page doesnt jump.
      $("dd").each(function(){
        $(this).height( $(this).height() );
      });
      
      hideStyle();
      return false;
    });
    
    var linkTags = $("link");
    function hideStyle() {
      // tee hee
      $("link[href*='style.css']").attr("media","braille");
    }
    function showStyle() {
      $("link[href*='style.css']").attr("media","all");
    }
    
    $(".preventDefault").click(function() {
      return false;
    });
    
    $(function(){
      $(".show").addClass("current");
    })
  </script>


  <!-- scripts concatenated and minified via ant build script-->
  <script src="../js/plugins.js"></script>
  <script src="../js/script.js"></script>
  <!-- end scripts-->

  
  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"],["_trackPageLoadTime"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

</body>
</html>